<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="../vuejs/vue.js"></script>
    <template id="my-app">
        <!-- 1.绑定textarea -->
        <label for="intro">
            自我介绍
            <textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
        </label>
        <h2>intro:{{intro}}</h2>

        <!-- 2.绑定checkbox -->
        <!-- 2.1单选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>isAgree:{{isAgree}}</h2>
        <!-- 2.2多选框 -->
        <span>你的爱好：</span>
        <label for="basketball">
            <input type="checkbox" id="basketball" value="basketball" v-model="hobbies">篮球
        </label>
        <label for="football">
            <input type="checkbox" id="football" value="football" v-model="hobbies">足球
        </label>
        <label for="tennis">
            <input type="checkbox" id="tennis" value="tennis" v-model="hobbies">网球
        </label>
        <h2>hobbies:{{hobbies}}</h2>
        <!-- 3.radio -->
        <span>性别：</span>
        <label for="male">
            <input type="radio" id="male" value="male" v-model="gender">男
        </label>
        <label for="female">
            <input type="radio" id="female" value="female" v-model="gender">女
        </label>
        <h2>gender:{{gender}}</h2>
        <!-- 4.select  多选加multiple-->
        <span>喜欢的水果：</span>
        <select name="" id="" v-model="fruit" multiple size="2">
            <option value="apple">苹果</option>
            <option value="orange">橘子</option>
            <option value="banana">香蕉</option>

        </select>
        <h2>fruit:{{fruit}}</h2>
    </template>
    <script>
        Vue.createApp({
            template:`#my-app`,
            data(){
                return{
                    intro:'',
                    isAgree:false,
                    hobbies:[],
                    gender:'',
                    fruit:[]
                }
            }

        }).mount('#app')
    </script>
</body>
</html>